<script setup lang="ts">
import { ref } from 'vue'

const githubRepo = ref('')
const vercelUrl = ref('')

const handleSubmit = () => {
  // 这里可以添加表单验证逻辑
  if (githubRepo.value && vercelUrl.value) {
    // 这里可以添加提交逻辑
    console.log('提交的数据:', {
      githubRepo: githubRepo.value,
      vercelUrl: vercelUrl.value
    })
    // 提交后可以跳转到其他页面或显示成功消息
    alert('作品提交成功！')
  }
}
</script>

<template>
  <div class="form-container">
    <div class="form-content">
      <h1 class="form-title">提交作品</h1>
      <form @submit.prevent="handleSubmit" class="form">
        <div class="form-group">
          <label for="githubRepo">GitHub 仓库地址</label>
          <input
            type="url"
            id="githubRepo"
            v-model="githubRepo"
            placeholder="请输入 GitHub 仓库地址"
            required
          />
          <small class="form-tip">例如：https://github.com/username/repo</small>
        </div>
        <div class="form-group">
          <label for="vercelUrl">Vercel 在线体验地址</label>
          <input
            type="url"
            id="vercelUrl"
            v-model="vercelUrl"
            placeholder="请输入 Vercel 部署地址"
            required
          />
          <small class="form-tip">例如：https://your-project.vercel.app</small>
        </div>
        <button type="submit" class="submit-button">提交作品</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.form-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.form-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.form-title {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 500;
}

input {
  padding: 0.8rem;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input:focus {
  outline: none;
  border-color: #409eff;
}

.form-tip {
  color: #909399;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.submit-button {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 1rem;
}

.submit-button:hover {
  background-color: #85ce61;
}

@media screen and (max-width: 480px) {
  .form-container {
    padding: 1rem;
  }
  
  .form-content {
    padding: 1.5rem;
  }
}
</style> 